<template>
  <view class="recipe-detail-container" :class="{ 'light-theme': isLightTheme }">
    <!-- 导航栏 - 参考首页样式 -->
    <view class="nav-bar">
      <!-- 顶部安全区域占位 - 保持与首页一致 -->
      <view class="safe-top"></view>

      <view class="nav-content">
        <view class="nav-left">
          <view class="back-button" @click="handleBack">
            <image src="/static/images/fanhui.png" class="back-icon" mode="aspectFill"></image>
            <text class="back-text">返回</text>
          </view>
        </view>
        <view class="nav-center">
          <image src="/static/images/yz-rougucha.png" class="nav-icon" mode="aspectFill"></image>
          <text>菜谱详情</text>
        </view>
        <view class="nav-right">
          <!-- 右侧保持空白，与首页结构一致 -->
          <view class="icon-placeholder"></view>
        </view>
      </view>
    </view>

    <!-- 菜谱信息区域 - 添加首页信息区域的装饰元素 -->
    <view class="recipe-info" v-if="recipe">
      <view class="section-title short-underline recipe-name">
        <text>{{ recipe.name }}</text>
      </view>
      
      <!-- 信息分组区域 - 参考首页的分组样式 -->
      <view class="info-group-section">
        <view class="group">
          <div class="group-decoration vegetable-decoration"></div>
          <view class="info-item">
            <text class="info-label">食材：</text>
            <view class="ingredients-container">
              <view v-for="(ingredient, index) in parsedIngredients" :key="index" class="ingredient-item">
                <image :src="getIngredientIcon(ingredient)" class="ingredient-icon" mode="aspectFill"></image>
                <text class="ingredient-name">{{ ingredient }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="group">
          <div class="group-decoration meat-decoration"></div>
          <view class="info-item">
            <text class="info-label">难度：</text>
            <text class="info-value">{{ recipe.difficulty || '未知' }}</text>
          </view>
        </view>
        
        <view class="group">
          <div class="group-decoration staple-decoration"></div>
          <view class="info-item">
            <text class="info-label">烹饪方法：</text>
            <text class="info-value">{{ recipe.methods || '未知' }}</text>
          </view>
        </view>
        
        <view class="group">
          <div class="group-decoration tool-decoration"></div>
          <view class="info-item">
            <text class="info-label">所需厨具：</text>
            <text class="info-value">{{ recipe.tools || '未知' }}</text>
          </view>
        </view>
        
        <view class="group">
          <div class="group-decoration tag-decoration"></div>
          <view class="info-item">
            <text class="info-label">标签：</text>
            <text class="info-value">{{ recipe.tags || '无' }}</text>
          </view>
        </view>
        
        <!-- 新增的视频平台显示区域 -->
        <view class="group" v-if="videoPlatform">
          <div class="group-decoration platform-decoration"></div>
          <view class="info-item platform-info">
            <text class="info-label">视频平台：</text>
            <view class="platform-display">
              <image :src="videoPlatformIcon" class="platform-icon" mode="aspectFill"></image>
              <text class="info-value">{{ videoPlatform }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 修改为水平排列的按钮区域 -->
      <view class="button-section">
        <!-- 复制链接按钮 -->
        <button class="action-button copy-link-btn" @click="copyVideoLink">
          <image src="/static/images/candan.png" class="button-icon" mode="aspectFill"></image>
          <text>复制链接</text>
        </button>
        
        <!-- 返回按钮 -->
        <button class="action-button back-btn" @click="handleBack">
          <image src="/static/images/fanhui.png" class="button-icon" mode="aspectFill"></image>
          <text>返回列表</text>
        </button>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading" v-if="!recipe">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 导入 foodIcons.json 文件
import foodIcons from '/types/foodIcons.json';

// 当前菜谱信息
const recipe = ref(null);
// 主题状态
const isLightTheme = ref(false);
// 视频平台信息
const videoPlatform = ref('');
const videoPlatformIcon = ref('');
// 解析后的食材列表
const parsedIngredients = ref([]);

// 页面加载时获取数据
onLoad((options) => {
  // 从路由参数中获取菜谱信息
  if (options.recipe) {
      try {
          // 先解码再解析JSON字符串
          const decodedRecipe = decodeURIComponent(options.recipe);
          const recipeData = JSON.parse(decodedRecipe);
          recipe.value = recipeData;
          
          // 识别视频平台
          if (recipeData.link) {
            identifyVideoPlatform(recipeData.link);
          }
          
          // 解析食材
          if (recipeData.stuff) {
            parsedIngredients.value = parseIngredients(recipeData.stuff);
          }
        } catch (error) {
          console.error('解析菜谱数据失败:', error);
          uni.showToast({
            title: '加载菜谱失败',
            icon: 'none'
          });
        }
  }
});

// 初始化主题
onMounted(() => {
  initTheme();
});

// 初始化主题函数
function initTheme() {
  // 先检查本地是否有用户保存的主题偏好
  const savedTheme = uni.getStorageSync('theme');

  if (savedTheme) {
    // 如果有保存的主题，使用保存的主题
    isLightTheme.value = savedTheme === 'light';
  } else {
    // 如果没有保存的主题，根据当前时间设置主题
    const now = new Date();
    const hour = now.getHours();
    // 早上6点到下午6点显示白天主题，其他时间显示黑夜主题
    isLightTheme.value = hour >= 6 && hour < 18;
  }
}

// 返回上一页
function handleBack() {
  uni.navigateBack();
}

// 复制视频链接函数
function copyVideoLink() {
  if (recipe.value && recipe.value.link) {
    uni.setClipboardData({
      data: recipe.value.link,
      success: function() {
        // 直接显示打开平台学习的提示，不使用定时器
        if (videoPlatform.value) {
          uni.showModal({
            title: '打开视频学习',
            content: `链接已复制成功，快去${videoPlatform.value}学习这道美食的制作方法吧！`,
            showCancel: false,
            confirmText: '好的', // 缩短为2个中文字符，符合长度限制
            confirmColor: '#4caf50'
          });
          // 如果是app 可以直接打开对应的app平台进行学习
        } else {
          uni.showModal({
            title: '打开视频学习',
            content: '链接已复制到剪贴板，快去相应平台学习这道美食的制作方法吧！',
            showCancel: false,
            confirmText: '好的', // 缩短为2个中文字符，符合长度限制
            confirmColor: '#4caf50'
          });
        }
      },
      fail: function() {
        uni.showToast({
          title: '复制失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    });
  } else {
    uni.showToast({
      title: '暂无链接可复制',
      icon: 'none',
      duration: 2000
    });
  }
}

// 识别视频平台的函数
function identifyVideoPlatform(link) {
  // 简单的平台识别逻辑，根据URL中包含的关键字判断
  if (link.includes('youtube.com') || link.includes('youtu.be')) {
    videoPlatform.value = 'YouTube';
    videoPlatformIcon.value = '/static/images/taiyang.png'; // 临时使用太阳图标
  } else if (link.includes('bilibili.com') || link.includes('b23.tv')) {
    videoPlatform.value = '哔哩哔哩';
    videoPlatformIcon.value = '/static/images/a-Bzhan2.png'; // 临时使用沸腾图标
  } else if (link.includes('tiktok.com') || link.includes('douyin.com')) {
    videoPlatform.value = '抖音/TikTok';
    videoPlatformIcon.value = '/static/images/yangcong1.png'; // 临时使用洋葱图标
  } else if (link.includes('kuaishou.com')) {
    videoPlatform.value = '快手';
    videoPlatformIcon.value = '/static/images/huanggua1.png'; // 临时使用黄瓜图标
  } else if (link.includes('youku.com')) {
    videoPlatform.value = '优酷';
    videoPlatformIcon.value = '/static/images/dabaicai1.png'; // 临时使用大白菜图标
  } else if (link.includes('iqiyi.com')) {
    videoPlatform.value = '爱奇艺';
    videoPlatformIcon.value = '/static/images/huacai-.png'; // 临时使用花菜图标
  } else {
    videoPlatform.value = '其他平台';
    videoPlatformIcon.value = '/static/images/meiyougengduole.png'; // 临时使用没有更多了图标
  }
}

// 解析食材字符串
function parseIngredients(stuffStr) {
  // 假设食材是用逗号分隔的
  if (!stuffStr) return [];
  return stuffStr.split(',').map(item => item.trim()).filter(item => item);
}

// 获取食材对应的图标
function getIngredientIcon(ingredient) {
  // 优先精确匹配
  if (foodIcons[ingredient]) {
    return foodIcons[ingredient];
  }
  
  // 尝试部分匹配
  for (const [key, value] of Object.entries(foodIcons)) {
    if (ingredient.includes(key)) {
      return value;
    }
  }
  
  // 默认使用蔬菜图标
  return '/static/images/shucai-.png';
}
</script>

<style scoped lang="scss">
@import '/pages/index/index.scss';

.recipe-detail-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #1a1a1a;
  color: #fff;
}

/* 导航栏样式 - 参考首页样式 */
.nav-bar {
  position: relative;
  width: 100%;
  border-bottom: 1upx solid rgba(255, 255, 255, 0.1);
}

/* 顶部安全区域，与首页保持一致 */
.safe-top {
  height: calc(var(--status-bar-height, 0px) + env(safe-area-inset-top, 0px));
  min-height: 44px;
  width: 100%;
  background-color: #1a1a1a;
}

.light-theme .safe-top {
  background-color: #1a1a1a;
}

.light-theme .nav-bar {
  border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
}

.nav-content {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0 40upx;
}

.nav-center {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-right {
  display: flex;
  align-items: center;
}

/* 返回按钮样式 */
.back-button {
  display: flex;
  align-items: center;
  padding: 4upx 12upx;
  border-radius: 16upx;
}

.back-icon {
  width: 32upx;
  height: 32upx;
  margin-right: 8upx;
}

.back-text {
  color: #fff;
  font-size: 28upx;
}

.light-theme .back-text {
  color: #333;
}

/* 导航图标 */
.nav-icon {
  width: 40upx;
  height: 40upx;
  margin-right: 12upx;
}

/* 右侧占位元素 */
.icon-placeholder {
  width: 40upx;
}

/* 菜谱信息区域 */
.recipe-info {
  flex: 1;
  padding: 40upx;
  overflow-y: auto;
  background-color: #1a1a1a;
}

/* 菜谱名称样式 - 参考首页标题样式 */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48upx;
  font-weight: bold;
  color: #fff;
  position: relative;
  margin-bottom: 48upx;
}

.light-theme .section-title {
  color: #333;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10upx;
  left: 52upx;
  width: calc(100% - 52upx);
  height: 8upx;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  border-radius: 5upx;
}

/* 短下划线样式 - 与首页保持一致 */
.section-title.short-underline::after {
  bottom: -32upx;
  width: calc((100% - 52upx) / 8);
  left: 50%;
  transform: translateX(-50%);
}

/* 图标样式 */
.image-icon {
  width: 48upx;
  height: 48upx;
  margin-right: 16upx;
}

/* 信息分组区域 - 参考首页分组样式 */
.info-group-section {
  margin-top: 48upx;
}

.group {
  margin-bottom: 48upx;
  position: relative;
  padding-left: 40upx;
}

/* 分组装饰线条 - 与首页保持一致 */
.group-decoration {
  position: absolute;
  top: 28upx;
  left: 0;
  width: 8upx;
  height: 32upx;
  border-radius: 4upx;
  transform: translateY(-50%);
}

/* 不同信息项使用不同颜色的装饰线条 */
.vegetable-decoration { background-color: #4caf50; }
.meat-decoration { background-color: #f44336; }
.staple-decoration { background-color: #ff9800; }
.tool-decoration { background-color: #2196f3; }
.tag-decoration { background-color: #9c27b0; }
.platform-decoration { background-color: #ffeb3b; }

.info-item {
  display: flex;
  margin-bottom: 20upx;
  flex-wrap: wrap;
}

.info-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 28upx;
  margin-right: 10upx;
  min-width: 120upx;
}

.info-value {
  color: #fff;
  font-size: 28upx;
  flex: 1;
}

/* 平台信息展示样式 */
.platform-info {
  align-items: center;
}

.platform-display {
  display: flex;
  align-items: center;
  flex: 1;
}

.platform-icon {
  width: 40upx;
  height: 40upx;
  margin-right: 12upx;
}

/* 修改为水平排列的按钮区域样式 */
.button-section {
  display: flex;
  justify-content: space-between;
  gap: 20upx;
  margin-top: 40upx;
  padding-top: 30upx;
  border-top: 1upx solid rgba(255, 255, 255, 0.1);
}

.light-theme .button-section {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* 操作按钮样式 */
.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 24upx;
  border-radius: 16upx;
  border: none;
  font-size: 32upx;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.light-theme .action-button {
  background-color: rgba(0, 0, 0, 0.1);
  color: #333;
}

.action-button:active {
  opacity: 0.8;
}

/* 复制链接按钮特定样式 */
.copy-link-btn {
  background-color: rgba(76, 175, 80, 0.2);
}

.light-theme .copy-link-btn {
  background-color: rgba(76, 175, 80, 0.1);
}

/* 返回按钮特定样式 */
.back-btn {
  background-color: rgba(33, 150, 243, 0.2);
}

.light-theme .back-btn {
  background-color: rgba(33, 150, 243, 0.1);
}

/* 按钮图标样式 */
.button-icon {
  width: 40upx;
  height: 40upx;
  margin-right: 16upx;
}

/* 加载状态 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  color: #fff;
  font-size: 32upx;
}

/* 白天主题样式 */
.light-theme {
  background-color: #f8f8f8;
  color: #333;
}

.light-theme .nav-bar {
  background-color: #fff;
}

.light-theme .recipe-info {
  background-color: #fff;
}

.light-theme .info-label {
  color: #666;
}

.light-theme .info-value {
  color: #333;
}

.light-theme .loading {
  color: #333;
}

/* 带图标的信息值样式 */
.info-value-with-icon {
  display: flex;
  align-items: center;
  flex: 1;
}

.info-icon {
  width: 36upx;
  height: 36upx;
  margin-right: 12upx;
  vertical-align: middle;
}

/* 食材容器样式 */
.ingredients-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  min-width: 0; /* 确保容器不会因为内容而被撑大 */
}

/* 单个食材项样式 */
.ingredient-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16upx;
  margin-bottom: 16upx;
  padding: 12upx 16upx;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12upx;
  flex-shrink: 0; /* 防止食材项被压缩 */
}

.light-theme .ingredient-item {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 食材图标样式 */
.ingredient-icon {
  width: 50upx;
  height: 50upx;
  margin-bottom: 8upx;
}

/* 食材名称样式 */
.ingredient-name {
  color: #fff;
  font-size: 24upx;
  text-align: center;
  white-space: nowrap;
}

.light-theme .ingredient-name {
  color: #333;
}
</style>